<!--  -->
<template>
  <div class="lsh-mark-box">
    <!-- <p
      class="lsh-img-box"
      v-for="(_, index) in 2">
      <img
        src="@/assets/icons/edit.svg"
        class="lsh-text-box"
        v-for="item in list"
        draggable="false"
        :style="{
          left: item.x + index * 500 + 'px',
          top: item.y + 'px',
          width: item.width + 'px',
          height: item.height + 'px',
          fontSize: item.width / 1.8 + 'px',
        }" />
      <span
        class="lsh-text-box"
        v-for="item in list"
        :style="{
          left: item.x + index * 500 + 'px',
          top: item.y + 'px',
          width: item.width + 'px',
          height: item.height + 'px',
          fontSize: item.width * 0.8 + 'px',
        }">
        口
      </span>
    </p> -->
    <a-popover
      trigger="click"
      align-point
      :popup-visible="popupVisible"
      position="bottom">
      <div
        :id="canvasId"
        class="lsh-mark-top"></div>
      <template #content>
        <div class="demo-point"></div>
      </template>
    </a-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDrawing } from "./hooks/useDraw";
import bg1 from "@/assets/images/test-bg.png";
import bg2 from "@/assets/images/test-bg-2.png";
import bg3 from "@/assets/images/test-bg-3.png";
import { Line, Rect } from "leafer-ui";
import { createCombinedWaveLineUnderBoxes } from "./tool/line.ts";
import { createTyposMark } from "./tool/text.ts";
import { ShapeTool } from "./tool/ShapeTool";
import { createBaseTool } from "../task-review/core/BaseTool";
import { reactive } from "vue";
import { IToolConfig } from "../task-review/types";
import { TextBox } from "./types";
import { Trigger } from "@arco-design/web-vue";
import { nextTick } from "vue";
import bg4 from "@/assets/images/000025.jpg";
import testData from "./data.json";
import { createParagraphRects, groupTextBoxes } from "./tool/paragraph";
import { PointerEvent, Group,Box } from "leafer-ui";
const canvasId = "mark-text";
const imgs = Array.from({ length: 4 }, () => {
  return bg4;
});
const { initImg, target, getApp, hanRotate } = useDrawing(canvasId);
const list = ref([]);
let dataList: TextBox[][] = [];
const selectedList = ref([]);
const popupVisible = ref(false);
let reqData = ref({});
const initData = () => {
  const w = 8.2;
  const h = 8;
  const start = {
    x: 10.2,
    y: 15,
  };
  //排数量
  const wLen = 18;
  //列数量
  const hLen = 19;
  const gap = 3.5;
  const pages = imgs.length || 2;

  // dataList = Array.from(new Array(pages), (_, pageIndex) => {
  //   return Array.from(new Array(hLen), (_, hIndex) => {
  //     return Array.from(new Array(wLen), (_, i) => {
  //       if (hIndex === 0 && i < 2) return false;
  //       return {
  //         x: start.x + i * w,
  //         y: start.y + (h + gap) * hIndex,
  //         width: w,
  //         height: h,
  //         boxId: pageIndex,
  //         id: `${pageIndex}_${hIndex}_${i}`,
  //       };
  //     }).filter(Boolean);
  //   })
  //     .flat()
  //     .map((item, index) => {
  //       return {
  //         ...item,
  //         data: {
  //           index,
  //           pageIndex,
  //           text: "1",
  //         },
  //       };
  //     });
  // });
  dataList = imgs.map((_, pageIndex) => {
    return testData.raw_data.map((item, index) => {
      return {
        ...item,
        boxId: pageIndex,
        data: {
          index,
          pageIndex: pageIndex,
          text: item.text,
          rowIndex: item.rowIndex,
          paragraphIndex:
            item.paragraphIndex +
            (pageIndex === 0 ? 0 : testData.raw_data.at(-1).paragraphIndex),
        },
      };
    });
  });
};
const mode = ref<"mix" | "sentence" | "paragraph">("mix"||"paragraph");
const initSentence = () => {
  const app = getApp();
  dataList.forEach((pageItem, pageIndex) => {
    const rects = pageItem.map((item) => {
      return new Rect({
        ...item,
        fill: "#26A555" || "#FFA126",
        opacity: 0.2,
        cursor: "text",
      });
    });
    target(pageIndex).addMany(rects);
    // const text = createTyposMark(pageItem[2]);
    // target(pageIndex).add(text);
    console.log(rects[0].x);
  });
  // const combinedWaveLine = createCombinedWaveLineUnderBoxes(dataList.flat());
  // combinedWaveLine.forEach((item, pageIndex) => {
  //   target(pageIndex).add(item); // 添加到画布中
  // });

  const toolManager = createBaseTool(
    app,
    ShapeTool({
      app,
      commit: (data: any) => {
        setTimeout(() => {
          selectedList.value = data.selectedTextBoxes;
          popupVisible.value = !!selectedList.value.length;
        }, 0);
      },
      target,
      imgList: imgs,
    })
  );
  toolManager.registerEvents();
};
let hoverParagraphIndex = -1;
const initParagraph = () => {
  const res = createParagraphRects(dataList.flat());
  res.forEach((item) => {
    target(item.pageIndex).add(
      new Rect({
        ...item,
        fill: 'red'||"transparent",
        opacity: 0.2,
        className: `${item.paragraphIndex}`,
        hoverStyle:{
          fill: "#000",
        },
      })
    );
  });
  const group = new Box({
    button:true,
    x:0,
    y:0,
    width:200,
    height:200,
    fill:'red'
  })
  getApp().tree.add(group);
  getApp().tree.find('.12').forEach((item)=>{
    item.dropTo(group);
  })
};
const initMix = () => {
  initSentence();
  // initParagraph();
};
const init = async () => {
  initData();
  await initImg({ url: imgs, penData: [] });
  switch (mode.value) {
    case "sentence":
      initSentence();
      break;
    case "paragraph":
      initParagraph();
      break;
    default:
      initMix();
      break;
  }
};
onMounted(() => {
  init();
});
</script>
<style scoped lang="less">
.lsh-mark-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid #fff;
  background: #79828f;
  /* 卡片投影 */
  box-shadow: 0px 0px 8px 0px rgba(0, 101, 255, 0.06);
  position: relative;
  // user-select: text;
  .lsh-mark-top {
    flex: 1;
    // .lsh-text-box {
    //   position: absolute;
    //   color: red;
    //   // user-select: all;
    //   // user-select: text;
    //   z-index: 1;
    //   border: 1px solid #000;
    // }
  }
  .lsh-img-box {
    position: absolute;
    width: 100vw;
    height: 100vh;
  }
  .lsh-text-box {
    position: absolute;
    color: red;
    // user-select: all;
    // user-select: text;
    // user-select: contain;
    z-index: 1;
    border: 1px solid #000;
    color: transparent;
    &::selection {
      background: rgba(0, 101, 255, 0.2);
      color: rgba(0, 101, 255, 0);
    }
  }
  .lsh-mark-bottom {
    height: 56px;
    background: #fff;
  }
}
</style>
